<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
	<meta name="author" content="mironcoder" />
	<meta name="email" content="mironcoder@gmail.com" />
	<meta name="profile" content="https://themeforest.net/user/mironcoder" />
	<meta name="template" content="Organe" />
	<meta name="title" content="Organe - Organic Food HTML Template" />
	<meta name="keywords" content="organe, organic, food, shop, ecommerce, store, html, agriculture, vegetable, organic food, organic product, organic farm, organic life, organic shop, food store" />
	<title> Login</title>
	<link rel="icon" href="<%=request.getContextPath() %>/images/favicon.png" />
	<link rel="stylesheet" href="<%=request.getContextPath() %>/static/css/bootstrap.min.css" />
	<link rel="stylesheet" href="<%=request.getContextPath() %>/static/css/main.css" />
	<link rel="stylesheet" href="<%=request.getContextPath() %>/static/css/user-form.css" />
</head>
 <body>
  <section class="user-form-part">
   <div class="container">
    <div class="row justify-content-center">
     <div class="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-5">
      <div class="user-form-logo">
       <a href="#"><img src="<%=request.getContextPath() %>/static/picture/logo.png" alt="logo" /></a>
      </div>
      <div class="user-form-card" style="height: 550px">
       <div class="user-form-title">
        <h2>welcome!</h2>
        <p>Use your credentials to access</p>
       </div>
       <form class="user-form" action="<%=request.getContextPath() %>/uc/login" method="post">
       <input type="hidden" name="flag" value="login"/>
        <div class="form-group">
         <input type="text" class="form-control" id="user" name="name" placeholder="请输入用户名" onkeyup="findUsernull()"/>
         <span id="u"></span>
        </div>
        <div class="form-group">
         <input type="password" class="form-control" id="pass" name="pass" placeholder="请输入密码" onkeyup="findPassnull()" />
          <span id="p"></span>
        </div>
        <div class="form-group">
         <input type="text" class="form-control" name="code" placeholder="请输入验证码"  />
        </div>
        <div class="form-group">
        <img src="<%=request.getContextPath() %>/uc/img" onclick="yzm()" id="getimg"/>
        </div>
        <div class="form-button" style="clear: both;">
         <p style="color: red" id="msg">${msg}</p>
         <button type="submit">登录</button>
         <p>没有账户？<a href="<%=request.getContextPath() %>/uc/reg">请注册</a></p>
        </div>
       </form>
      </div>
      <div class="user-form-footer">
       <p>Organe | &copy; Copyright by <a href="#">Mironcoder</a></p>
      </div>
     </div>
    </div>
   </div>
  </section>
  <script src="<%=request.getContextPath() %>/static/js/jquery-1.12.4.min.js"></script>
  <script src="<%=request.getContextPath() %>/static/js/popper.min.js"></script>
  <script src="<%=request.getContextPath() %>/static/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/jq/jquery-1.8.3.js"></script>
 <script type="text/javascript">
 	$(function(){
		$("#getimg").attr("src","<%=request.getContextPath() %>/uc/img?r="+Math.random())
	});
	function yzm(){
		//加上随机数据的目的是为了避免因为缓存原因，导致路径相同而刷新不出的问题
		$("#getimg").attr("src","<%=request.getContextPath() %>/uc/img?r="+Math.random())
	}
 	function findPassnull(){
	 	if($("pass").val()==null&&$("#pass").val()==""){
			$("#p").text("密码不能为空");
			$("#p").css("color","red");
		}else{
			$("#p").text("");
			$("#msg").text("")
		}
 	}
 	function findUsernull(){
		 if($("user").val()==null&&$("#user").val()==""){
				$("#u").text("用户名不能为空");
				$("#u").css("color","red");
		}else{
			$("#u").text("");
			$("#msg").text("")
		}
 	}
 	
</script>
 </body>
</html>